<template>
    <div>
        <!--        <div class="placeholder"></div>-->
        <!--      联系人-->
        <div class="chatFrame">
            <van-list>
                <van-cell v-for="item in list" @click="router.push({name:'chatPage',query:{id:item.friend.friend_id}})">
                    <template #title>
                        <div class="cell">

                            <van-badge :content="item.unread" :show-zero="false">
                                <van-image height="50" radius="5" :src="`/api${item.friend.Friend.avatar}`" width="50"/>
                            </van-badge>

                            <div class="message">
                                <p class="custom-title">{{ item.friend.Friend.name }}</p>
                                <span class="custom-title">{{item.chat.msg.includes('/upload/image/') ? '[图片]' : item.chat.msg }}</span>
                            </div>

                            <div class="time">
                                {{ dayjs(item.chat.date_time).unix() == -62135596800 ? '' : dayjs(item.chat.date_time).format("YYYY-MM-DD HH:mm:ss") }}
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-list>
        </div>

    </div>

</template>

<script lang="ts" setup>
import {
    ref
} from 'vue';
import {useRouter} from "vue-router";
import {
    useFriendStore
} from "../../../store/friend";
import {FriendListType} from "../../../type/friend";
import dayjs from "dayjs";

const list = ref<FriendListType[]>()

// 实例化路由
const router = useRouter()

// 实例化 好友仓库
const friendStore = useFriendStore()
// 获取好友列表
friendStore.getFriendList()

// 订阅仓库
friendStore.$subscribe((mutation, state) => {
    list.value = state.friendList
})
</script>

<style lang="less" scoped>
.van-nav-bar {
    background-color: #eeeeee;
}

.van-cell {
    display: flex;
}

.chatFrame {
    .cell {
        display: flex;
        justify-content: space-between;

        .message {
            width: 100%;
            flex: 1;
            margin-left: 0.7rem;
        }
    }
}
</style>